<template>
  <view>
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar leftText="" title="我的积分" @leftClick="back"></my-navbar>
    <!-- #endif -->
    <view class="fixed">
      <view class="total">可用积分：{{ points }}</view>
      <div class="tabs_box">
        <view class="box">
          <u-subsection
            class="tabs"
            :list="list"
            :current="current"
            @change="changeTab"
          ></u-subsection>
        </view>
      </div>
    </view>
    <view class="content">
      <view class="list flex-btw" v-for="item in dataList" :key="item.id">
        <view>
          <view v-if="item.type == 1"
            >获得积分：{{ item.related_order_sn }}</view
          >
          <view v-if="item.type == 2"
            >积分消费：{{ item.goods_name }}【{{ item.spu_name }}】</view
          >
          <view class="time"
            >{{
              item.type == 1 ? "获得时间" : item.type == 2 ? "消费时间" : ""
            }}：{{ parseTime(item.created_at) }}
          </view>
        </view>
        <view v-if="item.type == 1" class="right" style="color: #e84b4b"
          >+{{ item.points }}</view
        >
        <view v-else-if="item.type == 2" class="right" style="color: #4fa388"
          >-{{ item.points }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request";
export default {
  data() {
    return {
      list: [
        {
          name: "积分明细",
        },
        {
          name: "获得记录",
        },
        {
          name: "使用记录",
        },
      ],
      current: 0,
      dataList: [],
      count: 0,
      page: 1,
      points: 0,
    };
  },
  onLoad() {
    this.getData(1);
  },
  methods: {
    getData(page, type) {
      if (page == 1) {
        this.dataList = [];
      }
      let params = {
        page,
        size: 20,
      };
      type &&
        Object.assign(params, {
          type,
        });
      $https("GET", "getPointsRecord", params, (res) => {
        if (res.data.errcode == 0) {
          this.points = res.data.data.points;
          this.dataList = this.dataList.concat(res.data.data.list);
          this.count = res.data.data.count;
          this.page = page;
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
          });
        }
      });
    },
    changeTab(e) {
      this.current = e;
      this.getData(1, e);
    },
    parseTime(time) {
      time = time * 1000;
      var date = new Date(time);
      var year = date.getFullYear(),
        month =
          date.getMonth() + 1 < 9
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1,
        day = date.getDate() < 9 ? "0" + date.getDate() : date.getDate();
      return `${year}-${month}-${day}`;
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
  onReachBottom() {
    if (this.dataList.length < this.count) {
      this.page++;
      this.getData(this.page, this.current);
    }
  },
};
</script>

<style lang="scss">
.fixed {
  position: fixed;
  top: 0;
  // #ifndef MP-WEIXIN
  // top:80rpx;
  top: calc(80rpx + var(--status-bar-height));
  // #endif
  left: 0;
  right: 0;
  background: #f6f6f7;
  font-family: PingFang SC;
}

.total {
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 20rpx 0;
  box-shadow: 0px 4px 6px 2px rgba(217, 217, 217, 0.39);
  margin: 20rpx 0;
}

.tabs_box {
  padding: 0 120rpx;
}

.content {
  margin-top: 200rpx;
  padding: 20rpx 34rpx;
  font-family: PingFang SC;
  .list {
    border-bottom: 1px solid #ececec;
    color: #191919;
    padding: 20rpx 0;

    .time {
      color: #9a9a9a;
      margin-top: 12rpx;
    }
  }
}
</style>
